<template>
  <div class="publicSubscribe-container" v-loading="publicSubscribeFormLoading">
    <Breadcrumb></Breadcrumb>
    <PageDetailLayout @formCancel="commandFormCancel" @formSubmit="commandFormSubmit">
      <p class="small-title">基础信息</p>
      <el-form :ref="publicSubscribeFormRef" :model="publicSubscribeForm"
               :rules="publicSubscribeRules"
               size="small" label-width="90px" inline>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item :label="`${formatName}名称`" prop="name">
              <el-input v-model="publicSubscribeForm.name" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实现版本" prop="version">
              <el-input v-model="publicSubscribeForm.version" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实体类型" prop="entityType">
              <el-select v-model="publicSubscribeForm.entityType" clearable filterable class="width-300"
                         placeholder="请选择实体类型">
                <el-option v-for="(item, idx) in entityType_asset" :key="idx"
                           :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="type==='ATTRIBUTE'">
            <el-form-item label="属性归属" prop="attributeOrigin">
              <el-radio-group
                v-model="publicSubscribeForm.attributeOrigin"
                size="mini" class="width-300">
                <el-radio v-for="(item, idx) in attributeOriginType" :key="idx"
                          :label="item.value">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="type!=='ATTRIBUTE'">
            <el-form-item label="Method" prop="method">
              <el-input v-model="publicSubscribeForm.method" class="width-300"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input v-model="publicSubscribeForm.remarks" class="width-300"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p class="small-title">参数配置</p>
      <JsonEditor title="请求参数" ref="requestJsonRef" :schema="publicSubscribeForm.requestSchema"></JsonEditor>
      <JsonEditor title="响应参数" ref="responseJsonRef" :schema="publicSubscribeForm.responseSchema"></JsonEditor>
    </PageDetailLayout>
  </div>
</template>
<script>
  import {attributeOriginType, entityType_asset} from "@/config/common";
  import {messageHandle} from "@/utils";
  import {msgCode} from "@/config/string";
  import {routerMeta} from "@/router/routerMeta";
  import JsonEditor from "./JsonSchemaEditor.vue";
  export default {
    name: "PublicSubscribeEdit",
    components: {
      JsonEditor
    },
    data() {
      return {
        publicSubscribeForm: {
          name: '',
          entityType: 'AREA',
          version: '',
          attributeOrigin: 'CLIENT',
          requestSchema: {},
          responseSchema: {},
          remarks: '',
          type: 'ATTRIBUTE'
        },
        publicSubscribeFormLoading: false,
        publicSubscribeFormRef: 'publicSubscribeFormRef',
        publicSubscribeRules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          version: [
            {required: true, message: '请输入实现版本', trigger: 'blur'},
          ],
          entityType: [
            {required: true, message: '请选择实体类型', trigger: 'change'},
          ],
          attributeOrigin: [
            {required: true, message: '请选择属性归属', trigger: 'change'},
          ],
          method: [
            {required: true, message: '请输入Method', trigger: 'blur'},
          ],
        },
        entityType_asset,
        attributeOriginType,
        type: 'ATTRIBUTE',
        isEdit: false,
      }
    },
    mounted() {
      this.init()
    },
    watch: {
      '$route'(to, from) {
        this.init()
      }
    },
    computed: {
      formatName() {
        return this.$route.params.type === 'ATTRIBUTE' ? '属性' : this.$route.params.type === 'EVENT' ? '事件' : '服务'
      }
    },
    methods: {
      init() {
        this.initPublicSubscribeForm();
        this.publicSubscribeForm.type = this.$route.params.type;
        this.type = this.$route.params.type;
        if (this.$route.params.id) {
          this.getDetailData(this.$route.params.id);
        }
        this.isEdit = this.$route.path.includes('/edit');
      },
      initPublicSubscribeForm() {
        this.publicSubscribeForm = {
          name: '',
          entityType: 'AREA',
          version: '',
          attributeOrigin: 'CLIENT',
          requestSchema: {},
          responseSchema: {},
          remarks: '',
          type: this.$route.params.type,
        }
      },
      resetPublicSubscribeForm() {
        this.initPublicSubscribeForm();
        const forms = this.$refs[this.publicSubscribeFormRef];
        forms && forms.resetFields();
      },
      getDetailData(id) {
        this.publicSubscribeFormLoading = true;
        API.platformMessage.platformMessageDetail({_id: id}).then(result => {
          if (result.data) {
            this.publicSubscribeFormLoading = false;
            this.publicSubscribeForm = result.data

          }

        })
      },
      commandFormCancel() {
        this.$router.go(-1)
        this.resetPublicSubscribeForm()
       console.log(this.$refs.requestJsonRef)
      },
      commandFormSubmit() {
        this.$refs[this.publicSubscribeFormRef].validate((valid) => {
          if (valid) {
            this.publicSubscribeFormLoading = true
            if (this.isEdit) {
              this.publicSubscribeForm.requestSchema = this.$refs.requestJsonRef.exportSchema()
              this.publicSubscribeForm.responseSchema = this.$refs.responseJsonRef.exportSchema()
              API.platformMessage.platformMessageEdit(this.publicSubscribeForm).then(result => {
                this.publicSubscribeFormLoading = false;
                messageHandle({code: msgCode.ADD_SUCCESS, title: this.formatName});
                this.goBack()
              }).catch(err => {
                console.log('err', err)
                this.publicSubscribeFormLoading = false;
              });
            } else {
              this.publicSubscribeForm.requestSchema = this.$refs.requestJsonRef.exportSchema()
              this.publicSubscribeForm.responseSchema = this.$refs.responseJsonRef.exportSchema()
              API.platformMessage.platformMessageAdd(this.publicSubscribeForm).then(result => {
                this.publicSubscribeFormLoading = false;
                messageHandle({code: msgCode.EDIT_SUCCESS, title: this.formatName});
                this.goBack()
              }).catch(err => {
                console.log('err', err)
                this.publicSubscribeFormLoading = false;
              });
            }
          }
        })
      },
      goBack() {
        switch (this.publicSubscribeForm.type) {
          case 'ATTRIBUTE':
            this.$router.push({name: routerMeta.attributeManagement.name})
            break;
          case 'EVENT':
            this.$router.push({name: routerMeta.eventsManagement.name})
            break;
          case 'SERVICE':
            this.$router.push({name: routerMeta.serviceManagement.name})
            break;
          default:
            break;
        }
        this.resetPublicSubscribeForm()
      }
    }
  }
</script>
<style scoped lang="less">
  .publicSubscribe-container {
    .small-title {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-top: 0;
      border-left: #2D69E0 solid 4px;
      height: 18px;
      padding-left: 10px;
    }

    .width-300 {
      width: 200px;
    }

    .json-box {

      width: 100%;
      padding: 20px;
      box-sizing: border-box;

      .json-box-item {
        border: 1px solid #DADCE5;

        .json-box-top {
          padding: 2px 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #DADCE5;
        }

        .json-box-bottom {
          padding: 2px 10px;
          box-sizing: border-box;
          min-height: 200px;
          max-height: 300px;
          overflow: auto;
        }
      }

    }
  }
</style>
